<template>
  <div id="subjectEcharts" />
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import { TooltipComponent, GridComponent } from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

import { getSubjectData } from 'api/big-screen'
import resizeEcharts from '@/utils/resizeEcharts'

export default {
  name: 'SubjectEcharts',
  mixins: [resizeEcharts],
  data() {
    return {
      subjectEcharts: {
        totalArr: [], // 请求的总数据
        firstShowDataNum: 6, // 第一次展示数据条数
        currentPage: 1,
        currentPageSize: 50,
        isFirstLoad: true,
        isLoadData: false,
        clearIntervalNum: ''
      },
      myChart: null
    }
  },
  mounted() {
    echarts.use([
      TooltipComponent,
      GridComponent,
      BarChart,
      CanvasRenderer
    ])

    this._getSubjectData()
  },
  destroyed() {
    this.subjectEcharts.clearIntervalNum = clearInterval(this.subjectEcharts.clearIntervalNum)
  },
  methods: {
    _getSubjectData() {
      getSubjectData().then(res => {
        let data = res

        this.subjectEcharts.totalArr = this.subjectEcharts.totalArr.concat(data)
        this.subjectEcharts.isLoadData = true

        if (this.subjectEcharts.isFirstLoad === true) { // 只有第一次加载，才需要设置Echarts
          this.startSubjectEcharts()
          this.subjectEcharts.isFirstLoad = false
        }
      })
    },
    startSubjectEcharts() {
      this.myChart = echarts.init(document.getElementById('subjectEcharts'))

      let temporaryArr = [] // 临时数组,在第一次渲染时需要用到
      let leng = this.subjectEcharts.firstShowDataNum
      while (leng--) {
        temporaryArr.push(this.subjectEcharts.totalArr.shift())
      }

      let NameArr = []
      let PriceArr = []

      temporaryArr.forEach((ele) => {
        NameArr.push(ele.PropertyName.substr(0, 4))
        PriceArr.push(Number(ele.Price).toFixed())
      })

      let chartOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '0%',
          top: '10px',
          right: '0%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: NameArr,
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: 'rgba(231, 7, 7, 1)'
          },
          axisTick: {
            alignWithLabel: true,
            show: false
          },
          axisLabel: {
            interval: 0,
            show: true,
            splitNumber: 15,
            color: 'rgba(255,255,255,.6)',
            fontSize: '12'

          },
          axisLine: { // 移入时下侧背景色
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,.1)',
              width: 1,
              type: 'solid'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            formatter: '{value}', // '{value} 元'
            // margin: 0,
            show: true,
            color: 'rgba(255,255,255,.6)',
            fontSize: '12'
          },
          axisTick: {
            show: false
          },
          axisLine: { // 移入时左侧背景色
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,.1	)',
              width: 1,
              type: 'solid'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          }
        }],
        series: [{
          name: '当月新增主体',
          type: 'bar',
          data: PriceArr,
          barWidth: '35%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ]
            ),
            borderRadius: 5
          }
        }]
      }

      this.myChart.setOption(chartOption, true)

      this.subjectEcharts.clearIntervalNum = setInterval(() => {
        if (chartOption !== null) {
          let seriesData = chartOption.series[0].data // seriesData Y轴数据更改
          let ShiftData = this.subjectEcharts.totalArr.shift()
          seriesData.shift()
          seriesData.push(Number(ShiftData.Price).toFixed())

          let xAxisData = chartOption.xAxis[0].data // X轴名称数据更改
          xAxisData.shift()
          xAxisData.push(ShiftData.PropertyName.substr(0, 4)) // 设置限制，最多显示5个字符，不然无法柱状图无法全部显示

          this.myChart.setOption(chartOption)
          if (this.subjectEcharts.totalArr.length < 20 && this.subjectEcharts.isLoadData === true) { // 为了防止在setInterval时重复请求,设置isLoadData开关
            this.subjectEcharts.isLoadData = false
            this.subjectEcharts.currentPage += 1
            this._getSubjectData()
          }
        }
      }, 2000)
    }

  }
}
</script>

<style scoped>

</style>
